All files / src/lib hover-effects.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Hover Effects Utility Classes
 * Provides consistent hover effects across the application
 */
 
export const hoverEffects = {
  // Card hover effects
  card: 'hover:bg-slate-700/50 transition-all duration-200',
  cardScale: 'hover:bg-slate-700/50 hover:scale-105 transition-all duration-200',
  cardGlow: 'hover:bg-slate-700/50 hover:shadow-lg hover:shadow-blue-500/20 transition-all duration-200',
  
  // Button hover effects
  button: 'hover:opacity-90 transition-opacity duration-200',
  buttonScale: 'hover:scale-105 transition-transform duration-200',
  buttonGlow: 'hover:shadow-lg transition-shadow duration-200',
  
  // Link hover effects
  link: 'hover:text-blue-400 transition-colors duration-200',
  linkUnderline: 'hover:underline transition-all duration-200',
  
  // Icon hover effects
  icon: 'hover:text-white transition-colors duration-200',
  iconScale: 'hover:scale-110 transition-transform duration-200',
  iconRotate: 'hover:rotate-12 transition-transform duration-200',
  
  // Image hover effects
  image: 'hover:opacity-80 transition-opacity duration-200',
  imageScale: 'hover:scale-110 transition-transform duration-300',
  imageZoom: 'hover:scale-105 transition-transform duration-200',
  
  // Background hover effects
  bgHover: 'hover:bg-slate-800/50 transition-colors duration-200',
  bgHoverLight: 'hover:bg-slate-700/30 transition-colors duration-200',
  bgHoverDark: 'hover:bg-slate-900/70 transition-colors duration-200',
  
  // Border hover effects
  border: 'hover:border-blue-500 transition-colors duration-200',
  borderGlow: 'hover:border-blue-500 hover:shadow-sm hover:shadow-blue-500/50 transition-all duration-200',
  
  // Text hover effects
  text: 'hover:text-white transition-colors duration-200',
  textGlow: 'hover:text-white hover:drop-shadow-[0_0_8px_rgba(255,255,255,0.5)] transition-all duration-200',
  
  // Combined effects
  cardInteractive: 'hover:bg-slate-700/50 hover:scale-[1.02] hover:shadow-lg transition-all duration-200 cursor-pointer',
  cardClickable: 'hover:bg-slate-700/50 active:scale-95 transition-all duration-200 cursor-pointer',
  
  // Subtle effects
  subtle: 'hover:bg-slate-800/30 transition-colors duration-200',
  subtleScale: 'hover:scale-[1.01] transition-transform duration-200',
  
  // Intense effects
  intense: 'hover:bg-blue-600/20 hover:scale-105 hover:shadow-xl hover:shadow-blue-500/30 transition-all duration-200'} as const;
 
export type HoverEffect = keyof typeof hoverEffects;
 
/**
 * Get hover effect class by type
 */
export function getHoverEffect(effect: HoverEffect): string {
  return hoverEffects[effect];
}
 
/**
 * Combine hover effect with custom classes
 */
export function withHoverEffect(effect: HoverEffect, customClasses?: string): string {
  return `${hoverEffects[effect]} ${customClasses || ''}`.trim();
}
 
/**
 * Get appropriate hover effect for component type
 */
export function getComponentHoverEffect(
  component: 'card' | 'button' | 'link' | 'icon' | 'image'
): string {
  switch (component) {
    case 'card':
      return hoverEffects.cardScale;
    case 'button':
      return hoverEffects.button;
    case 'link':
      return hoverEffects.link;
    case 'icon':
      return hoverEffects.iconScale;
    case 'image':
      return hoverEffects.imageZoom;
    default:
      return hoverEffects.subtle;
  }
}
 
/**
 * Hover effect presets for common use cases
 */
export const hoverPresets = {
  // Cards
  contentCard: hoverEffects.cardScale,
  statsCard: hoverEffects.cardGlow,
  miniCard: hoverEffects.cardInteractive,
  
  // Buttons
  primaryButton: hoverEffects.button,
  iconButton: hoverEffects.iconScale,
  
  // Lists
  listItem: hoverEffects.bgHover,
  listItemClickable: hoverEffects.cardClickable,
  
  // Images
  thumbnail: hoverEffects.imageZoom,
  cover: hoverEffects.imageScale,
  
  // Links
  navLink: hoverEffects.link,
  textLink: hoverEffects.linkUnderline} as const;